<script setup></script>

<template>
    <el-container>
        <el-header>
          <el-row>
            <el-col :span="4">
              <img src="../../assets/images/logo.png" />
              <h1>{{title}}</h1>
            </el-col>
            <el-col :span="6" :offset="2">
              <el-menu
                class="el-menu-d---emo"
                mode="horizontal"
                :default-active="activeIndex"
              >
                <el-menu-item index="0"><router-link to="/">首页</router-link></el-menu-item>
                <el-menu-item index="1"><router-link to="/article">文章</router-link></el-menu-item>
                <el-menu-item index="2"><router-link to="/course">课程</router-link></el-menu-item>
                <el-menu-item index="3"><router-link to="/mall">商场</router-link></el-menu-item>
              </el-menu>
            </el-col>
            <el-col :span="6" :offset="2">
              <el-input v-model="keywords" placeholder="请输入搜索关键词" />
            </el-col>
            <el-col :span="4" v-if="user==null">
              <el-link type="primary" underline="never" href="login.html">登录</el-link>
              <el-link type="primary" underline="never" href="register.html">注册</el-link>
            </el-col>
            <el-col :span="4" v-else>
              <el-link type="primary" underline="never">
                <el-avatar src="./static/images/avatar.png" />
                <p style="padding: 0 20px">{{user.username}}</p>
              </el-link>
            </el-col>
          </el-row>
        </el-header>
    </el-container>    
</template>